<template>
	<div id="home-main">
		<mu-row justify-content="center">
			<home-video
				:videoUrl="currentVideoUrl"
				:waitToShow="waitToShow"
			></home-video>
		</mu-row>

		<home-video-list @item-click="getInfo"></home-video-list>
		<!--
		<home-comment :videoItem="videoItem"></home-comment> -->
		<home-gkdjs></home-gkdjs>
	</div>
</template>

<script lang="ts">
import { createComponent, ref, onMounted } from "@vue/composition-api";
import videoInfoList, { VideoInfo } from "/utils/video-info";
import { title } from "/utils/config";

import appLogo from "../logo.vue";
import homeVideo from "./video.vue";
import homeVideoList from "./video-list.vue";
//import homeComment from "./comment.vue";
import homeGkdjs from "./gkdjs.vue";

export default createComponent({
	name: "home-main",
	components: { homeVideo, homeVideoList, /*homeComment, */homeGkdjs },
	setup() {
		const currentVideoUrl = ref(videoInfoList[0].videoUrl);
		const videoItem = ref(videoInfoList[0]);
		const waitToShow = ref(false);

		function changeResizeVideo(
			typeBoolean: boolean = true,
			time: number = 500
		) {
			setTimeout(() => (waitToShow.value = typeBoolean), time);
		}

		function getInfo(item: VideoInfo) {
			if (item.videoUrl !== currentVideoUrl.value) {
				waitToShow.value = false;
				currentVideoUrl.value = item.videoUrl;
				videoItem.value = item;
				changeResizeVideo(false, 200);
				changeResizeVideo(true);
			}
		}

		onMounted(() => changeResizeVideo());
		return {
			title,
			videoItem,
			getInfo,
			currentVideoUrl,
			waitToShow
		};
	}
});
</script>

<style lang="less">
#home-main {
	.mu-row {
	}
}
</style>
